<template>
	<view>
		<!-- 分类导航区域 -->
		<!-- 自定义搜索组件区域-->
		<view class="search-box">
			<!-- 实现吸顶效果 -->
			<my-search @click="gotoSearch"></my-search>
		</view>
		<!-- 滚动条区域 -->
		<view class="scroll-view-container">
			<scroll-view class="left-scroll-view" scroll-y="true" :style="{height: wh + 'px'}">
				<!-- 一级分类渲染 -->
				<block v-for="(item, i) in cateList" :key="i">
					<view :class="['left-scroll-view-item', i === active ? 'active' : '']" @click="activeChange(i)">
						{{item.cat_name}}
					</view>
				</block>
			</scroll-view>
			<scroll-view class="right-scroll-view" scroll-y="true" :style="{height: wh + 'px'}" :scroll-top="scrollTop">
				<!-- 渲染二级分类 -->
				<view class="cate-lv2" v-for="(item2, i2) in cateList2" :key="i2">
					<view class="cate-lv2-title">
						<!-- 使用//来进行样式定位 -->
						/{{item2.cat_name}}/
					</view>
					<!-- 渲染三级分类 -->
					<view class="cate-lv3-list">
						<!-- 在下一级别遍历 -->
						<view class="cate-lv3-item" v-for="(item3, i3) in item2.children" :key="i3"
							@click="gotGoodsList(item3)">
							<!-- 图片 -->
							<!-- 动态获取图片路径 -->
							<image :src="item3.cat_icon" alt="">
							<!-- 文本 -->
							<text>{{item3.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 分级区域 -->
	</view>
</template>

<script>
	export default {
		onLoad() {
			// 动态获取手机屏幕可用高度
			const sysInfo = uni.getSystemInfoSync()
			// 动态赋值可用高度,除去搜索框的高度,从而给分类框更多可用空间
			this.wh = sysInfo.windowHeight - 50,
				// 获取分类数据
				this.getCateList()
		},
		data() {
			return {
				// 一级分类列表
				cateList: [],
				// 二级分类列表
				cateList2: [],
				// 可用高度
				wh: 0,
				// 是否激活
				active: 0,
				// 右侧滚动置顶
				scrollTop: 0
			}
		},
		methods: {
			async getCateList() {
				// 传入参数进行数据获取
				const {
					data: res
				} = await uni.$http.get('api/public/v1/categories')
				if (res.meta.status !== 200) {
					return uni.$showMsg()
				} else {
					// 一级分类赋值
					this.cateList = res.message;
					// 二级分类赋值
					this.cateList2 = res.message[0].children;
				}
			},
			// 监听点击
			activeChange(i) {
				this.active = i
				// 二级分类动态赋值
				this.cateList2 = this.cateList[i].children;
				// 滚动置顶动态赋值
				// 使1到0像素距离，用户体验不出来
				this.scrollTop = this.scrollTop === 0 ? 1 : 0;
			},
			// 商品页面跳转
			gotGoodsList(item3) {
				// 跳转到商品页面并且携带好参数
				uni.navigateTo({
					url: '/subpkg/goods_list/goods_list?cid=' + item3.cat_id
				})
			},
			// 自定义组件点击事件实现
			gotoSearch() {
				// 页面跳转
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
	.search-box{
		// 设置为吸顶效果
		position: sticky;
		// 吸顶的位置
		top: 0;
		// 提高层级
		z-index: 999;
	}
	.scroll-view-container {
		display: flex;

		.left-scroll-view {
			width: 120px;
		}

		.left-scroll-view-item {
			background-color: #F7F7F7;
			line-height: 60px;
			text-align: center;
			font-size: 12px;

			&.active {
				background-color: #FFFFFF;
				position: relative;

				&::before {
					content: "";
					// 改为会计元素
					display: block;
					// 宽高定义
					width: 3px;
					height: 30px;
					// 背景颜色
					background-color: #C00000;
					// 绝对定位
					position: absolute;
					// 位置定义
					top: 50%;
					left: 0;
					transform: translateY(-50%);
				}
			}
		}

		.cate-lv2-title {
			font-size: 12px;
			font-weight: bold;
			text-align: center;
			padding: 15px 0;
		}

		.cate-lv3-list {
			// 浮动布局
			display: flex;
			// 自动换行
			flex-wrap: wrap;

			.cate-lv3-item {
				// 一行的宽度
				width: 33.33%;
				display: flex;
				// 纵向布局
				flex-direction: column;
				// // 纵向居中
				justify-content: center;
				// // 水平居中
				align-items: center;

				image {
					width: 60px;
					height: 60px;
				}

				text {
					font-size: 12px;
				}
			}
		}
	}
</style>
